<template>
  <el-aside class="menu-wrapper" bg="#545c64" :class="{ 'menu-wrapper-not-collapse': !isCollapse }">
    <el-scrollbar>
      <div class="pr-base">
        <el-menu
          :default-active="currentAcitveMenu"
          :collapse="isCollapse"
          :collapse-transition="false"
          active-text-color="#ffd04b"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          unique-opened
          router
        >
          <template v-for="route in handledRoutes" :key="route.name">
            <el-menu-item v-if="!route.children && !route.meta.currentActiveMenu" :index="route.path" class="nav-item">
              <el-icon><component :is="route.meta?.icon || ''" /></el-icon>
              <template #title>{{ route.meta?.name || '' }}</template>
            </el-menu-item>

            <el-sub-menu v-else :index="route.path">
              <template #title>
                <el-icon>
                  <component :is="route.meta?.icon || ''" />
                </el-icon>
                <span>{{ route.meta?.name || '' }}</span>
              </template>
              <div v-for="item in route.children" :key="item.path">
                <el-menu-item :index="`${route.path}/${item.path}`" class="sub-nav-item" v-if="!item.meta.currentActiveMenu">{{
                  item.meta?.name || ''
                }}</el-menu-item>
              </div>
            </el-sub-menu>
          </template>
        </el-menu>
      </div>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import { handledRoutes } from '@/router'

defineProps({
  isCollapse: {
    type: Boolean,
  },
})

const route = useRoute()
const currentAcitveMenu = computed(() => {
  if (route.meta && route.meta.currentActiveMenu) {
    return route.meta.currentActiveMenu
  }
  return route.fullPath
})
</script>

<style lang="scss" scoped>
.menu-wrapper {
  width: 64px;
  transition: width 0.2s ease;

  &-not-collapse {
    width: 296px !important;
  }
}

:deep(.el-menu) {
  border-right: none;
}
</style>
